<template>
  <div v-loading="loading" element-loading-text="拼命加载中">

    <div class="search-wrapper">

      <ul class="search-box">
        <li><span class="filter-name">事件类型：</span>
          <el-select v-model="listQuery.typeId" placeholder="请选择" clearable style="width:130px" class="filter-item">
            <el-option v-for="(item,index) in Options" :key="index" :label="item.typeName" :value="item.typeId"/><!--联表-->
          </el-select></li>
        <li><span class="filter-name">事件来源：</span>
          <el-select v-model="listQuery.eSource" placeholder="请选择" clearable style="width:150px" class="filter-item">
            <el-option v-for="(item,index) in  eSourceOption" :key="index" :label="item.dictName" :value="item.dictValue"/><!--用的字典-->
          </el-select></li>
        <li><span class="filter-name">所属河道：</span>
          <el-select v-model="listQuery.riverId" placeholder="请选择" clearable style="width:150px" class="filter-item"><!--联表-->
            <el-option v-for="(item,index) in Options" :key="index" :label="item.riverName" :value="item.riverId"/>
          </el-select></li>
        <li><span class="filter-name">河长：</span>
          <el-select v-model="listQuery.riverManage" placeholder="请选择" clearable style="width:130px" class="filter-item">
            <el-option v-for="(item,index) in  tableData" :key="index" :label="item.riverManage" :value="item.riverManage"/>
          </el-select></li>
        <li><span class="filter-name">状态：</span>
          <el-select v-model="listQuery.handleState" placeholder="请选择" clearable style="width:150px" class="filter-item">
            <el-option :label="'待处理'" :value="-1" />
            <el-option :label="'已拒绝'" :value="8" />
            <el-option :label="'已受理'" :value="1" />
            <el-option :label="'处置中'" :value="9" />
            <el-option :label="'待确认'" :value="5" />
            <el-option :label="'已完成'" :value="0" />
            <el-option :label="'督办中'" :value="7" />
            <el-option :label="'督办完成'" :value="6"/>
          </el-select><br/></li>
        <li><span class="filter-name">上报时间：</span>
          <el-date-picker v-model="listQuery.createTime" type="datetimerange" :picker-options="pickerOptions2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"/></li>
          <li style="padding-left:10px;">
              <el-button style="vertical-align:middle;margin-top:-2px;" round size="mini" type="primary" @click="getList()">查询</el-button>
          </li>
      </ul>
      <el-row>
        <el-col :span="24">
          <li style="padding-left:10px;"><el-button size="mini" type="primary" round @click="dialogForm=true">新增事件</el-button></li>
        </el-col>
      </el-row>
    </div>
    <div class="data-wrapper">
      <template v-if="tableData!=null">
        <el-table ref="multipleTable" :data="tableData"  tooltip-effect="dark" style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection" label="全选" width="55">
          </el-table-column>
          <el-table-column type="index" label="序号" :index="indexMethod">
          </el-table-column>
          <el-table-column prop="eCode" label="事件编号"  width="180">
          </el-table-column>
          <el-table-column prop="eName" label="事件名称"  width="180">
          </el-table-column>
          <el-table-column prop="typeName" label="事件类型"  width="180"><!--关联字段-->
          </el-table-column>
          <el-table-column prop="createUser" width="150" label="上报人">
          </el-table-column>
          <el-table-column prop="riverName" label="所属河道"  width="120"><!--关联字段-->
          </el-table-column>
          <el-table-column prop="riverManage" label="责任河长"  width="120">
          </el-table-column>
          <el-table-column prop="eSource.name" label="事件来源">
          </el-table-column>
          <el-table-column prop="createTime" label="上报时间">
          </el-table-column>
          <el-table-column prop="handleState" label="当前状态" :formatter="formatState">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button title="查看" size="small" icon="el-icon-search" type="primary" circle
                         @click="handleView(scope.$index, scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 分页和导出功能-->
    <el-row :gutter="20" type="flex" justify="space-between" align="center" class="page-wrapper">
      <el-col :span="4">
        <div class="grid-content">
          <el-button type="primary">批量导出</el-button>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="page-item">
          <el-pagination background
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="listQuery.currentPage"
                         :page-sizes="pageSizes"
                         :page-size="listQuery.pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="dataCount"/>
        </div>
      </el-col>
    </el-row>
    <!--新增事件弹出框-->
    <el-dialog title="友情链接管理" :visible.sync="dialogForm" width="40%">
      <el-form :model="form" :rules="rules" ref="form">
          <el-row type="flex" justify="center">
              <el-col :span="16">
                  <el-form-item label="事件名称" :label-width="formLabelWidth" prop="eName">
                      <el-input v-model="form.eName" auto-complete="off"></el-input>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row type="flex" justify="center">
              <el-col :span="16">
                  <el-form-item label="事件编号" :label-width="formLabelWidth" prop="eCode">
                      <el-input v-model="form.eCode" auto-complete="off"></el-input>
                  </el-form-item>
              </el-col>
          </el-row>
              <el-row type="flex" justify="center">
              <el-col :span="16">
                  <el-form-item label="事件类型" :label-width="formLabelWidth" prop="typeId">
                      <el-select v-model="form.typeId" placeholder="请选择事件类型"><!--动态。当前user的地址-->
                          <el-option v-for="(item,index) in eventTypeOptions" :key="index" :label="item.typeName" :value="item.typeId"/>
                      </el-select>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row type="flex" justify="center">
              <el-col :span="16">
                  <el-form-item label="事件级别" :label-width="formLabelWidth" prop="eGrade">
                      <el-select v-model="form.eGrade" placeholder="请选择事件级别">
                          <el-option label="I类事件" value="1"></el-option>
                          <el-option label="II类事件" value="2"></el-option>
                      </el-select>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row type="flex" justify="center">
              <el-col :span="16">
                  <el-form-item label="事件来源" :label-width="formLabelWidth" prop="eSource">
                      <el-select v-model="form.eSource" placeholder="请选择事件来源">
                          <el-option label="寻河上报" value="1"></el-option>
                          <el-option label="群众上报" value="2"></el-option>
                          <el-option label="后台新增" value="3"></el-option>
                          <el-option label="设备告警" value="4"></el-option>
                      </el-select>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row type="flex" justify="center">
              <el-col :span="16">
          <el-form-item label="所属河道" :label-width="formLabelWidth" prop="riverId">
              <el-select v-model="form.riverId" placeholder="请选择所属河道"><!--动态。当前user的地址-->
                  <el-option v-for="(item,index) in riverOptions" :key="index" :label="item.riverName" :value="item.riverId"/>
              </el-select>
          </el-form-item>
              </el-col>
          </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="16">
            <el-form-item label="事件描述" :label-width="formLabelWidth" prop="eNote">
              <el-input type="textarea" v-model="form.eNote" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogForm = false">取 消</el-button>
        <el-button size="small" type="primary" @click="insertEvent('form')">确 定</el-button>
      </div>
    </el-dialog>
    <!--查看弹出框-->
    <el-dialog title="查看" :visible.sync="dialogVisible">
      <el-form v-if="oneCol">
        <el-row :gutter="10">
          <el-col :span="24">
           事件标题: {{oneCol.eName}}
          </el-col>
          <el-col :span="24">
            涉及河段：{{oneCol.riverName}}
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            事件类型：{{oneCol.typeName}}
          </el-col>
          <el-col :span="24">
            影响范围：{{"???"}}<!--未知-->
          </el-col>
            <el-col :span="24">
                图片：还没做
            </el-col>
        </el-row>
        <el-row :gutter="10">
           <el-col :span="24">
             事件来源：{{oneCol.eSource}}<!--Vue解析问题。只能强行赋值-->
           </el-col>
           <el-col :span="24">
             事件描述：{{oneCol.eNote}}<!--未知-->
           </el-col>
        </el-row>
          <el-row :gutter="10">
          <el-col :span="24">
                  上报时间：{{oneCol.createTime}}<!--未知-->
          </el-col>
          </el-row>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        data(){
            return{
                tableData:null,//所有数据
                loading: false,//载入中显示flag
                currentPage:1,//当前页数
                pagesize:10,//分页数
                listSelect:[],//被选中的对象列表
                searchInput:" ",//搜索框内容
                dataCount: 100,//默认数据总数,总条数
                pageSizes: [5, 10, 20, 30, 40],//选择每页数据量
                listQuery: {//查询条件
                    currentPage: 1,
                    pageSize: 5,
                    typeId:'',
                    eSource:'',
                    riverId:'',
                    riverManage:'',
                    handleState:'',
                    createTime:null,
                },
                Options:[],//总的搜索下拉
                riverOptions:[],//新增事件登录者所属地区河湖下拉
                eventTypeOptions:[],//新增事件事件类型下拉
                eSourceOption:[],//事件来源下拉菜单,是字典类型!!!!
                dataIndex:null,//,还没用上
                formLabelWidth: '100px',//弹出框样式属性
                dialogForm:false,//新增事件弹出框flag
                dialogVisible:false,//单行查看弹出框flag
                oneCol:{//单行的选中数据，初始值为当前行数据
                },
                form:{},//新增事件弹出框
                rules:{//插入功能效验啊
                    eName: [
                        { required: true, message: "请填写事件名称", trigger: "blur" }
                    ],
                    eCode: [
                        { required: true, message: "请填写事件编号", trigger: "blur" }
                    ],
                    eGrade: [
                        { required: true, message: "请选择事件级别", trigger: "blur" },
                    ],
                    typeId: [
                        { required: true, message: "请选择事件类型", trigger: "blur" },
                    ],
                    eSource: [
                        { required: true, message: "请选择事件来源", trigger: "blur" },
                    ],
                    riverId: [
                        { required: true, message: "请选择所属河道", trigger: "blur" },
                    ],
                    eNote:[
                        { required: true, message: "请填写事件详情", trigger: "blur" },
                    ],
                },
                pickerOptions2: {//时间下拉菜单功能
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },

            }
        },
        methods:{
            getList() {//请求数据库获取列表
                console.log(this.listQuery);
                this.loading = true;
                this.postRequest('/api/rcs/events',this.listQuery).then((res)=>{
                    var data = res.data;
                if (data.status == 200) {
                    this.tableData = data.data;
                    console.log(this.tableData);
                    this.dataCount = data.count;
                } else {
                    this.$message.error(data.msg);
                    this.tableData = data.data;//无数据
                }
                this.loading = false;
            }).catch(error => {//错误信息
                    this.$message.error(error);

            });
            },
            getRiverOptions(){//获取新建事件河湖下拉
                var regId=JSON.parse(window.localStorage.getItem('user')).value.regId.code;
                this.getRequest('/api/rcs/getRiversByRegId',regId).then((res)=>{//先写所有的以后会改
                    var data = res.data;
                    if (data.status == 200) {
                        console.log(data.data);
                        this.riverOptions=data.data;
                    } else {
                        this.$message.error(data.msg);
                    }
                    this.loading = false;
                }).catch(error => {//错误信息
                    this.$message.error(error);
                });
            },
            getEventTypeOptions(){//获取新建事件事件类型下拉
                this.getRequest('/api/rcs/eventTypeAlive').then((res)=>{//先写所有的以后会改
                    var data = res.data;
                    if (data.status == 200) {
                        console.log(data.data);
                        this. eventTypeOptions=data.data;
                    } else {
                        this.$message.error(data.msg);
                    }
                    this.loading = false;
                }).catch(error => {//错误信息
                    this.$message.error(error);
                });

            },
             getOptions(){//获取事件下拉
                 this.getRequest('/api/rcs/eventsOption',this.listQuery).then((res)=>{
                 var data = res.data;
                 if (data.status == 200) {
                     this.Options=data.data;
                 } else {
                     this.$message.error(data.msg);
                 }
                 this.loading = false;
             }).catch(error => {//错误信息
                 this.$message.error(error);
             });
             },

            insertEvent(form){
                this.loading = true;
                this.$refs[form].validate(valid => {
                    if (valid) {
                        console.log(this.form);
                        this.postRequest("/api/rcs/eventInsert", this.form)
                            .then(res => {
                                var data = res.data;
                                if (data.status == 200) {
                                    this.$message.success("新增事件成功");
                                    this.dialogForm = false;
                                    this.getList();
                                    this.loading =false;
                                    this.form = {};
                                } else {
                                    this.$message.error(data.msg);
                                }
                            })
                            .catch(error => { //错误信息
                                this.$message.error("未插入成功，请检查数据");
                            });
                    } else {
                        this.$message.error("error submit!!");
                        return false;
                    }
                });

            },
            handleView(index,row){//单行查看弹窗显示赋值
                this.dialogVisible=true;
                this.oneCol=row;
                this.oneCol.eSource=row.eSource.name;//Vue解析问题。只能强行赋值
            },

            formatState: function(row, column) {//显示状态
                return row.handleState == 0 ? "已完成" :
                    row.handleState==8?"已拒绝":
                        row.handleState==1?"已接收" :
                            row.handleState==9?"处置中":
                                row.handleState==5?"待确认":
                                    "待处理";
            },
            indexMethod(index) {//序号递增
                // return index+1;
                return (index+1)+(this.listQuery.currentPage-1)*this.listQuery.pageSize;
            },

            handleSizeChange: function (size) {//每页个数改变
                // this.pagesize = size;
                this.listQuery.pageSize = size;
                this.listQuery.currentPage = 1;
                this.getList();
            },
            handleCurrentChange: function(currentPage){//得到当前
                // this.currentPage = currentPage;
                this.listQuery.currentPage = currentPage;
                this.dataIndex=this.listQuery.currentPage*this.listQuery.pageSize;
                this.getList();
            },
            //选中
            handleSelectionChange(val) {
                this.listSelect=val;
            }

        },
        created() {
            this.getList();
            this.getDictionary({types:["EVENT_REPORT"]}).then(res => {//获取事件来源下拉
                var data = res.data;
                if (data.status == 200) {
                    this.eSourceOption= data.data["EVENT_REPORT"];
                    console.log(this.eSourceOption);
                } else {
                    this.$message.error(data.msg);
                }
            }).catch(error => {
                    this.$message.error(error);
                });
            this.getOptions();
            this.getRiverOptions();
            this.getEventTypeOptions();
        },
        mounted(){//构造时调用,向数据库请求设备列表

        },
        updated(){},
        destroyed(){},
    }
</script>

<style scoped>

</style>